<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="/images/chiji.ico" type="image/x-icon">
    <title>详情页</title>
    <link rel="stylesheet" href="/css/detail.css">
</head>

<body>
    <header></header>
    <div class="mainwrap" id="detail-display"></div>
    <script type="text/html" id="detail-content">
        <div class="comm-title">
            <a href="#" class="index-link">商城首页></a>
            <a href="#" class="index-link">家居日用></a>
            <em>{{title}}</em>
        </div>
        <div class="product-instro">
            <div class="product-preview">
                <div class="good-imgs">
                    <ul>
                        <li class="picshow">
                            <a href="#" class="product-image">
                                <img src="{{photo[0].url}}" alt="" class="zoom-image">
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 小图片 -->
                <div class="details">
                    <ul class="picdetail-list" id="gal1">
                        {{each photo img}}
                        <li class="active">
                            <a href="javascript:;" data-image="{{img.url}}" data-zoom-image="{{img.url}}">
                                <img src="{{img.url}}" width="74" height="70" alt="商品图">
                            </a>
                        </li>
                        {{/each}}
                        <!-- <li class="">
                                <a href="#"><img src="/images/xq02.jpg" width="74" height="70" alt="商品图"></a>
                            </li>
                            <li class="">
                                <a href="#"><img src="/images/xq03.jpg" width="74" height="70" alt="商品图"></a>
                            </li>
                            <li class="">
                                <a href="#"><img src="/images/xq04.jpg" width="74" height="70" alt="商品图"></a>
                            </li> -->
                    </ul>
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="product-info">
                <h3 class="pord-name">{{title}}</h3>
                <div class="pord-price">
                    <span class="pord-dispri">
                        "￥"
                        <strong>{{price}}</strong>
                    </span>
                    <span class="pord-orpri">￥{{originPrice}}</span>

                </div>
                <div class="pord-detailbox">
                    <div class="pord-sold">
                        "已售："
                        <span>{{saleNum}}</span>
                    </div>
                    <div class="pord-totalcom">
                        "累计评价："
                        <span class="commentNum">0</span>
                    </div>
                    <div class="pord-starbox">
                        <i></i>
                        <span>0.0</span>
                    </div>
                </div>
                <div id="blk-detail">
                    <div class="pord-num">
                        <label class="pt">数量</label>
                        <div class="mj" id="mj" data-id="{{id}}">
                            <a href="javascript:;" class="num-plus">
                                <i class="icon-detail"></i>
                            </a>
                            <input type="text" size="2" maxlength="3" class="input-detail" id="input-detail" value="1">
                            <a href="javascript:;" class="num-minus">
                                <i class="icon-detail"></i>
                            </a>
                        </div>
                        <span class="pord-stock">(库存充足)</span>
                    </div>

                    <div class="pord-btn">
                        <a href="javascript:;" class="add-to-cart">加入购物车</a>
                        <a href="javascript:;" class="buy-btn">立即购买</a>
                        <a href="javascript:;" class="btn-collect">
                            <i class="icon-collect"></i>
                            <span>收藏</span>
                        </a>
                    </div>
                </div>
            </div>

        </div>

        <div class="product-detail">
            <div class="pord-tab">
                <ul>
                    <li class="curtab" id="g-detail">商品详情
                        <i class="tabline" id="bt1" style="display:block"></i>
                    </li>
                    <li class="curtab" id="g-call">用户点评
                        <span>(0)</span>
                        <i class="tabline" id="bt2"></i>
                    </li>
                    <li class="curtab" id="g-connect">联系商家
                        <i class="tabline" id="bt3"></i>
                    </li>
                </ul>
            </div>
            <div class="tabcont">
                <!-- 商品详情 -->
                <div class="pord-detail" style="display: block;">
                    <div class="paramter">
                        <ul>
                            <li>
                                <label class="fl">商品名称：</label>
                                <span class="par-name">{{title.slice(0,15)}}</span>
                            </li>
                            <li>
                                <label class="fl">店铺：</label>
                                <span class="fl">衍界</span>
                            </li>
                            <li>
                                <label class="fl">上架时间：</label>
                                <span class="mr">2019-09-19</span>
                            </li>
                            <li>
                                <label class="fl">商品毛重：</label>
                                <span class="fl">500g</span>
                            </li>
                            <li>
                                <label class="fl">商城：</label>
                                <span class="mr">绝地求生</span>
                            </li>
                            <li>
                                <label class="fl">周边分类：</label>
                                <span class="mr">家居日用</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 单品详情图 -->
                    <div class="detailbox">
                        {{each descContentList xqimg}} {{if xqimg.image}}
                        <p style="width:100%"><img src="{{xqimg.image.url}}" alt=""></p>
                        {{/if}} {{/each}}
                    </div>
                </div>
                <!-- 用户点评 -->
                <div class="all-comment" style="display:none">
                    <span class="fl">玩家综合评分</span>
                    <span class="pord-starall fl">
                    <i class="i-star"></i>
                </span>
                    <span class="fl all-point">0.0</span>
                </div>
                <!-- 联系商家 -->
                <div class="port-contact" style="display:none">
                    <dl class="contact-company">
                        <dt>商家：千峰小蒋</dt>
                        <dd>
                            <div></div>
                        </dd>
                    </dl>
                    <dl class="contact-method">
                        <dt>商家联系方式</dt>
                        <dd>
                            <div>电话：18869727572</div>
                            <div>QQ:446694431</div>
                            <div>微信：无</div>
                            <div class="contact-service">
                                <a href="javascript:;">联系商家</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="contact-time">
                        <dt>商家服务时间</dt>
                        <dd>
                            <div>在线时间：10:00-18:00</div>
                            <div class="concat-notice"></div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </script>


    <footer></footer>
    <div class="totop" style="color: #ff0000;background: #ccc; width: 100px;text-align: center">返回顶部</div>


    <script src="/libs/require/require.min.js" data-main="/js/detail"></script>
</body>

</html>